<template>
	<uni-drawer ref="showSearch" mode="left" :width="300">
		<uni-section type="line" title="查询条件">
			<view class="form">
				<uni-forms label-position="top" label-width="120">
					<uni-forms-item label="网络状态" name="networkStatus">
						<uni-data-picker placeholder="请选择网络状态" popup-title="请选择订单状态" :localdata="internetStateList" v-model="networkStatus" />
					</uni-forms-item>
					<uni-forms-item label="设备状态" name="machineStatus">
						<uni-data-picker placeholder="请选择设备状态" popup-title="请选择订单状态" :localdata="machineStateList" v-model="machineStatus" />
					</uni-forms-item>
					<uni-forms-item label="缺货率" name="outStockRate">
						<view class="flex-row-start">
							<view class="margin-lr-10">缺货率大于</view>
							<uni-number-box v-model="outStockRate"></uni-number-box>
							<view class="margin-lr-10">%</view>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<view class="form-btn">
			<button type="primary" @click="submit">提交</button>
			<button type="warn" @click="reset">重置</button>
		</view>
	</uni-drawer>
</template>

<script>
	
	export default {
		data() {
			return {
				internetStateList: [
					{ value: 0, text: "全部" },
					{ value: 1, text: "在线" },
					{ value: 2, text: "离线" }
				],
				machineStateList: [
					{ value: 0, text: "全部" },
					{ value: 1, text: "正常" },
					{ value: 2, text: "故障" }
				],
				networkStatus: "",
				machineStatus: "",
				outStockRate: "",
			}
		},
		
		props: {
			list: {
				type: Array,
				default: () => [],
				required: true
			}
		},
		
		methods: {
			show( ) {
				this.$refs.showSearch.open()
			},
			
			close() {
				this.$refs.showSearch.close()
			},
			
			treeChange(e) {
				uni.showModal({
					title: '确认切换吗？',
					content: `切换为用户：${e.name}`,
					success: res => {
						if(res.confirm) {
							uni.setStorageSync('mid', e.id)
							uni.setStorageSync('mname', e.name)
							this.$emit('changeMerchant', e.id)
							this.close();
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.form {
		padding: 20rpx;
	}
	
	.form-btn {
		padding: 20rpx;
		
		button {
			margin: 5px 0;
		}
	}
</style>